import styled from 'styled-components'

export const SearchBox = styled.div`
    flex:1;
    overflow:hidden;
    font-size:.14rem
    color:#fff
   .inputbox{
    width:100%
       height:.44rem;
       padding:.06rem .5rem .06rem .3rem;
       position:relative;
       border-bottom:1px solid #eee;
       i{
        position: absolute;
        top: .13rem;
        left: .15rem;
        width: .2rem;
        height: .4rem;
        font-size:.19rem
        overflow: hidden;
        color:#aaa;
        font-weight:normal;
       }
       .my-drawer{
            top:.37rem;
           .am-drawer-content{
               width:100%;
                color:#fff
           }
       }
       .input_outer{
           width:2.67rem;
           height:.31rem;
           box-shadow: 0 1px 2px rgba(0,0,0,0.05) inset;
           border-radius:.2rem;
           background: #F5F5F5;
           position: relative;
           left:.25rem
           
        .fa-search{
            position:absolute
            left:.2rem
            top:.08rem
            font-weight:100
        }
        input{
            border: none;
            background: transparent;
            padding-left: .4rem;
            color: #999;
            width: 80%;
            height:.3rem
            outline:none
        }
       }
       .search{
        width:.3rem;
        height:.3rem;
        position:absolute
        right:.25rem
         top:.03rem
        color:#6b6b6b
       }
   }
   .list{
        list-style: none;
        padding: 0px;
        color: #666;
        margin: 0px;
        overflow-y: scroll;
    li{
        padding-left: .4rem;
        border-bottom: solid 1px #eee;
        position: relative;
        line-height: .45rem;
        text-align:left
        a{
            color:#6b6b6b
        }
        #icon-search{
            position:absolute;
            left:.15rem
            width: .2rem
            top:.12rem
        }
        #icon-right{
            position:absolute;
            right: .15rem;
            width: .2rem;
            top:.12rem
        }
    }
    }
    .my-drawer {
        position: relative;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
       
      }
      .my-drawer .am-drawer-sidebar {
        background-color: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      .my-drawer .am-drawer-sidebar .am-list {
        width: 300px;
        padding: 0;
      }
      .am-drawer-content{
        .am-drawer-draghandle{
        width:0
        }
      }
      .my-accordion .pad .am-accordion-content-box {
        padding: 10px;
        .am-accordion-content{
            background:#ccc
        }
      }
      .am-drawer.am-drawer-left .am-drawer-draghandle{
          width:0px
      }
      .am-list-item .am-list-line .am-list-content{
          background:#ededed!important
          margin-bottom:.02rem
          line-height: .4rem!important;
          text-indent: .3rem!important;
          width:100%!important
      }
      .am-accordion .am-accordion-item .am-accordion-header{
      }
      .am-list-item{
          padding-left:0!important
      }
      .am-accordion .am-accordion-item .am-accordion-header{
          font-size:14px!important
          width:.8rem!important
      }
       .am-list-item .am-list-line .am-list-content{
        font-size:14px!important
      }
`